<template>
	<view id="tmpl">
		<sl-filter :ref="'slFilter'" :topFixed="topFixed" :menuList="menuList" @result="result"></sl-filter>
		<view class="list">
			<view class="item" v-for="book in books">
				<view @click="GoToPage('peixun','detial?id='+book.id +'&title='+book.name)">
					<view class="thumb">
						<image :src="book.thumb" mode="widthFix" />
					</view>
					<view class="name">
						<text>{{book.name}}</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import slFilter from '@/components/songlazy-sl-filter/sl-filter/sl-filter.vue';
	export default {
		components: {
			slFilter
		},
		data() {
			return {
				list_date :[],
				topFixed: true,
				menuList: [{
						'title': '时间',
						'key': 'key_1',
						'detailList': [
							{
									'title': '全部',
									'value': ''
								}
						]
					},
					{
						'title': '分类',
						'key': 'key_2',
						'isMutiple': false,
						'detailList': [
							{
									'title': '全部',
									'value': ''
								},{
								'title': '安全',
								'value': 1
							},
							{
								'title': '环保',
								'value': 3
							}, {
								'title': '服务',
								'value': 2
							}
						]
					}
				],
				books: []
			}
		},
		methods: {
			onLoad: function() {
				let _this = this;
				let myDate=new Date();
				let mouse = myDate.getMonth()+1;
				let year = myDate.getFullYear();
				for(let i = 0;i<5;i++){
					let _mouse = mouse - i;
					if(_mouse <=0){
						year -= 1;
						_mouse = 12;
					}
					if(_mouse > 12){
						_mouse = 1;
						year += 1;
					}
					if(_mouse<10){
						_mouse="0"+_mouse
					}
					let _date = {
						'date' : year +'年'+_mouse +'月',
						'mouse' : _mouse,
						"search":year +'-'+_mouse,
						"title" : year +'年'+_mouse +'月',
						"value" : year +'-'+_mouse,
					};
					_this.menuList[0].detailList.push(_date);
				}
				
				this.$api.list_px({}).then(res=>{
					for(let i = 0 ; i < res.data.rows.length ; i++){
						let item = res.data.rows[i];
						let data = {
							id: item.id,
							thumb: '../../static/image/icon/book.png',
							name: item.title
						}
						_this.books.push(data)
					}
				})
			},
			onShow: function() {
				this.$_if.Initialize(this);
				let is_login = uni.getStorageSync('user_token') ? true : false;
				if(!is_login){
					uni.navigateTo({
						url:'../profile/user_login'
					})
				}
			},
			result : function(value){
				let _this = this;
				let date = value.key_1;
				let type = value.key_2;
				_this.books = [];
				this.$api.list_px({
					'date':date,
					'type' : type
				}).then((res)=>{
					console.log(res)
					for(let i = 0 ; i < res.data.rows.length ; i++){
						let item = res.data.rows[i];
						let data = {
							id: item.id,
							thumb: '../../static/image/icon/book.png',
							name: item.title
						}
						_this.books.push(data)
					}
				})
			}
		}
	}
</script>

<style lang="scss" >
	page {
		background-color: #FFFFFF;
	}

	.list {
		@extend .flex-between;
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: $background-color-1;
		padding: 30upx 0;

		.item {
			width: 33.3vw;
			text-align: center;
			margin-bottom: 15upx;

			.thumb {
				image {
					width: 15vw;
					height: 15vw !important;
				}
			}

			.name {
				font-size: $uni-font-size-base;
			}
		}
	}
</style>
